@import (reference) "~weaver-mobile/dist/weaver-mobile.less";
@import './icon.less';
/*base*/
@cpt-main-color1: @color-text-base-inverse;
@cpt-main-color2: @color-text-base;
@cpt-paragraph-color: @color-text-paragraph;
@cpt-title-color: #727272;
@cpt-text-color: #acacac;
@cpt-ground-color: #efeff5;
@cpt-border-color: #efeff4;
@cpt-placeholder-color: #EFEFF4;

@cpt-font-family: 'Microsoft YaHei', "Poppins", serif;

@fx: @hd;

html, body {
  width: 100%;
  height: 100%;

  #root {
    width: 100%;
    height: 100%;
  }
}

.cpt {
  width: 100%;
  height: 100%;
  background: #fff;
  //overflow: hidden;

  * {
    font-family: @cpt-font-family;
  }

  .am-list-body {
    border-top: 0*@fx solid @cpt-main-color1;
  }

  .loading {
    height: 80%;
    width: 100%;
    background: transparent;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .background-linearTo(@direction:to right,@colorStart,@colorEnd) {
    background: @colorStart; //Old browsers
    background: -moz-linear-gradient(@direction, @colorStart 0%, @colorEnd 100%); //FF3.6+
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, @colorStart), color-stop(100%, @colorEnd)); //Chrome,Safari4+
    background: -webkit-linear-gradient(@direction, @colorStart 0%, @colorEnd 100%); //Chrome10+,Safari5.1+
    background: -o-linear-gradient(@direction, @colorStart 0%, @colorEnd 100%); //Opera 11.10+
    background: -ms-linear-gradient(@direction, @colorStart 0%, @colorEnd 100%); //IE10+
    background: linear-gradient(@direction, @colorStart 0%, @colorEnd 100%); //W3C
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@colorStart, endColorstr=@colorEnd, GradientType=0); //IE6-9
  }
  /*flex布局*/

  .flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }

  .flex-dir-col {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex-align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .flex-align-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .flex-align-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .flex-justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .flex-justify-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .flex-justify-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .flex-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  /*template style*/

  .template-wrapper-border:not(:last-of-type) {
    padding-bottom: 5*@fx;
    border-bottom: 1*@fx solid #eee;
  }

  .template-wrapper {
    width: 100%;
    .flex;
    .flex-justify-start;
    align-items: stretch;
    font-size: @font-size-caption-sm;
    margin-left: @h-spacing-md;
  }

  .template-avator-box {
    .flex;
    .flex-justify-center;
    .flex-align-center;
    background: transparent;
    padding-right: 10*@fx;
  }

  .template-date-box {
    .flex;
    .flex-justify-center;
    .flex-align-center;
    min-width: 66.7*@fx;
    background: transparent;
    padding-right: 10*@fx;
  }

  .template-avatar {
    width: 44*@fx !important;
    height: 44*@fx !important;
    border-radius: 50%;
  }

  .template-main-box {
    width: 100%;
    padding-right: 40*@fx;
    padding-bottom: 5*@fx;
  }

  .template-main-box-no-state {
    width: 100%;
    padding: 0;
    .flex;
    .flex-dir-col;
    .flex-justify-center;
    .flex-align-start;
  }

  .template-row {
    margin: 0;
    padding: 0;
  }

  .template-row span {
    font-size: @font-size-caption-sm;
    color: @cpt-text-color;
    word-break: break-all;
    white-space: nowrap;
    margin-right: 5*@fx;
  }


  .template-dot-box {
    width: 52*@fx;
    position: absolute;
    right: @h-spacing-lg;
    top: @v-spacing-md;
    height: 100%;
  }


  .template-title, .template-title span {
    font-size: @font-size-base;
    color: @color-text-paragraph;
    font-weight: bold;
  }

  .template-dot-box div {
    position: absolute;
    right: 0;
    top: 0;
    margin-left: 0;
    display: inline-block;
    min-width: 27*@fx;
    padding: 2*@fx 4*@fx;
    border-radius: 5*@fx;
    font-size: @font-size-icontext;
    z-index: 1;
    border: none;
    word-break: keep-all;
    white-space: normal;
    text-align: center;
  }

  .template-dot-btn {
    position: absolute;
    right: 2*@fx;
    bottom: 20*@fx;
    font-size: 22*@fx;
    width: 40*@fx;
    height: 30*@fx;
    background: transparent;
    border: none;
  }

  .template-dot-icon {
    position: absolute;
    right: 0*@fx;
    bottom: 0*@fx;
    font-size: 22*@fx;
    color: #525252;
    padding: 3*@fx;
  }

  .template-dot-1 { //蓝色入库
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #107acf, #5bc2da);
    color: @cpt-main-color1;
  }

  .template-dot-2 { //绿色领用
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #1c6a04, #23aa11);
    color: @cpt-main-color1;
  }

  .template-dot-3 { //紫色借用
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #6c0484, #bf43d1);
    color: @cpt-main-color1;
  }

  .template-dot-4 { //棕色维修
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #4c9b8d, #6ee1cd);
    color: @cpt-main-color1;
  }

  .template-dot-5 { //橙色报废
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #e85405, #c29d3c);
    color: @cpt-main-color1;
  }

  .template-dot--4 {
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #2e3291, #4f56fa);
    color: @cpt-main-color1;
  }

  .template-dot--7 { //灰色减损
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #9b9b9b, #dddddd);
    color: @cpt-main-color1;
  }


  .template-dot-7 { //红色变更
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #971d12, #d5111e);
    color: @cpt-main-color1;
  }

  /*盘点状态 比资产多的部分*/

  .template-dot-0 {
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #9b517d, #e276b6);
    color: @cpt-main-color1;
  }

  .template-dot-6 {
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #714714, #c5773d);
    color: @cpt-main-color1;
  }

  .template-dot-8 {
    border: 1*@fx solid transparent;
    .background-linearTo(to right, #8e9b32, #d3e64a);
    color: @cpt-main-color1;
  }


  .cpt-fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
  }

  /*index*/

  .cpt-nav-bar-icon {
    width: 24*@fx;
    height: 24*@fx;
    font-size: 28*@fx;
    margin-left: -4*@fx;
    margin-top: -4*@fx;
  }

  .cpt-nav-bar-icon-selected {
    width: @icon-size-md;
    height: @icon-size-md;
    color: @brand-primary;
  }

  .cpt-scan-box {
    width: 100%;
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 49*@fx;
    left: 0;

    .flex;
    .flex-dir-col;
    .flex-align-center;
    .flex-justify-center;
  }

  .cpt-scan-icon {
    width: 90*@fx;
    height: 90*@fx;
    color: @brand-primary;
    margin-top: -10*@fx;
    margin-bottom: 10*@fx;
  }

  .cpt-scan-title {
    font-size: @font-size-base;
    color: @brand-primary;
  }

  .cpt-button-group {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: @cpt-main-color1;
    .flex;
    .flex-space-between;
    .flex-align-center;
  }

  .cpt-button-cancel {
    width: 50%;
    border-radius: 0;
  }

  .cpt-button-apply {
    width: 50%;
    border-radius: 0;
  }

  /*asset*/

  .asset-wrapper {
    height: 100%;
    margin-top: 45*@fx;
  }

  .asset-acceptance-top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .asset-acceptance-content-wrapper {
    position: fixed;
    top: 45px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: scroll;
  }

  .asset-acceptance-detail-card-title {
    padding: @v-spacing-sm @h-spacing-lg;
    color: @color-text-caption;
    background: #f3f7fe;
  }

  .operations-btn-wrapper {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: @cpt-main-color1;
    .flex;
  }

  .operations-btn-scan {
    width: 47*@fx;
    border-radius: 0*@fx;
    padding: 0;
    .flex;
    .flex-align-center;
    .flex-justify-center;
  }

  .operations-btn-icon {
    color: @cpt-main-color1;
    font-size: 38*@fx;
  }

  /*home*/
  @icon-size: 24*@fx;
  @box-circle-size: 40*@fx;
  @font-bold: 700;

  .h-flex-center {
    .flex;
    .flex-justify-center;
    .flex-align-center;
  }

  .h-base-bg {
    background: @fill-base;
    color: @color-text-base;
  }

  .h-border-line1 {
    border-bottom: @border-width-md solid @fill-grey;
  }

  .h-border-line2 {
    border-bottom: @border-width-md solid @fill-body;
  }

  .h-card-wrapper {
    padding: @h-spacing-md*2;
    .h-base-bg;
  }

  .h-margin-bottom {
    margin-bottom: @v-spacing-md;
    box-shadow: 0 2*@fx 2*@fx 0*@fx @cpt-border-color;
  }

  .h-card-text {
    color: @cpt-text-color;
    font-size: @font-size-base;
  }

  .h-card-icon {
    color: @cpt-main-color2;
    font-size: 38*@fx;
  }

  .h-card-box {
    .h-flex-center
  }

  .h-card-box-circle {
    width: @box-circle-size;
    height: @box-circle-size;
    border: @border-width-lg solid @brand-primary;
    border-radius: @radius-circle;
    position: relative;
    .h-flex-center
  }

  .h-card-title {
    color: @brand-primary;
    font-size: @font-size-caption-sm;
    font-weight: @font-bold;
    margin-top: 10*@fx;
    word-break: keep-all;

    .h-flex-center
  }

  .h-card-dot {
    position: absolute;
    right: -7*@fx;
    top: -3*@fx;
  }

  .h-list-container {
    background: @cpt-main-color1;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .h-list-bg {
    background: @cpt-ground-color;
  }

  .h-list-box {
    background: @fill-base;
    margin-bottom: @v-spacing-md;

    .wm-list-page-modal {
      padding-bottom: 0;
    }
  }

  //.h-list-box:last-of-type {
  //  border-bottom: 1*@fx solid @fill-grey;
  //  box-shadow: 0 2*@fx 2*@fx 0*@fx @cpt-border-color;
  //}

  .h-list-top-bar {
    .flex;
    .flex-space-between;
    .flex-align-center;
    padding: 10*@fx @h-spacing-md*2;
    background: @fill-base;

    padding: 10*@fx @h-spacing-md*2 10*@fx 0;
    background: #fff;
    margin-left: @h-spacing-lg;
    border-bottom: 1*@fx solid @cpt-border-color;
  }

  .h-list-top-title {
    font-size: @font-size-caption;
    color: @cpt-title-color;
  }

  .h-info-content {
    margin-left: @h-spacing-lg;
    padding: @v-spacing-md @h-spacing-lg 0 0;
    .flex;
    .flex-space-between;
  }

  .h-info-left {
    .flex;
    .flex-justify-center;
    .flex-align-center;
  }

  .h-info-right {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    .flex;
    .flex-justify-end;
    .flex-align-center;
  }

  .h-info-item {
    padding: 0 10px 0 0;
  }

  .h-info-item-text {
    font-size: @font-size-base;
    color: @cpt-text-color;
  }

  .h-info-item-num {
    font-size: 16*@fx;
    color: @cpt-main-color2;
    margin: 5*@fx 0;
    font-weight: bold;
    text-align: right;
  }

  .h-info-sum {
    .flex;
    .flex-align-center;
    .flex-justify-center;
  }

  .h-info-more {
    font-size: 24*@fx;
    color: @cpt-text-color;
    margin-left: @h-spacing-lg;
  }

  .h-grid-border {
    border-right: 1*@fx solid @cpt-border-color;
    border-bottom: 1*@fx solid @cpt-border-color;
  }

  .h-list-wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .h-list-content {
    background: @fill-base;
    color: @color-text-base;
  }

  .h-list-top-more {
    height: 19*@fx;
    .flex;
    .flex-justify-end;
    .flex-align-center;
    font-size: @font-size-base;
    color: @color-text-secondary;
  }

  .h-list-none {
    height: 40*@fx;
    line-height: 40*@fx;
    text-align: center;
    font-size: @font-size-caption-sm;
    color: @color-text-secondary;
  }

  .h-list-content .wm-list-page-item:not(:last-of-type) .am-list-content {
    border-bottom: @border-width-md solid @cpt-border-color;
  }

  .h-list-content .wm-list-page-item:last-of-type, .h-list-content .am-list-body {
    border-bottom: none;
  }

  .h-list-content .am-list-body {
    border-top: none;
  }

  .h-list-content .am-list-line {
    border: none !important;
  }

  .h-color-percent-box {
    margin: 0 @h-spacing-lg;
    padding-bottom: @h-spacing-lg;
    padding-top: @v-spacing-md;
  }

  .h-color-percent {
    height: 20*@fx;
  }

  /*statistics*/

  .chart-list {
    border-width: @border-width-md 0 @border-width-md 0;
    border-style: solid;
    border-color: @border-color-base;
    background: @fill-base;
  }

  .chart-list-item {
    padding: 0 @h-spacing-lg;
    color: @color-text-base;
    background: @fill-base;
  }

  .chart-list-item-link {
    color: @color-text-base;
    background: @fill-base;
  }

  .chart-list-item:active {
    background: @fill-tap;
  }

  .chart-list-item-content {
    width: 100%;
    height: 40*@fx;
    font-size: @font-size-base;
    border: none;
    border-bottom: @border-width-md solid @border-color-base;

    .flex;
    .flex-justify-center;
    .flex-align-center;
    .flex-space-between;
  }

  .chart-list-item:last-of-type .chart-list-item-content {
    border-bottom: none;
  }

  .chart-list-item-icon {
    color: @border-color-base;
    font-weight: bold;
  }
.report-top-bar-wrapper{
  padding:@h-spacing-lg/2 @h-spacing-lg ;
}
  .report-wrapper {
    background: @cpt-main-color1;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    // padding: @v-spacing-md 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: normal
  }

  .report-top-bar {
    padding: @v-spacing-sm @h-spacing-lg;
    background: @brand-error;
    color: @color-text-base-inverse;
    border-radius: @radius-md;
    font-size: @font-size-caption;
    .flex;
    .flex-space-between;
    .flex-align-center;
    .background-linearTo(to right, @brand-primary - #111, @brand-primary + #333);
  }

  .report-top-title {
    background: transparent;
    color: @color-text-base-inverse;
  }

  .report-top-icon {
    font-size: 20*@fx;
  }

  /*assetinfo*/

  .asset-info-wrapper {
    margin-top: 45*@fx;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  .asset-acceptance-wrapper {
    margin-top: 45*@fx;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  .asset-advanced-wrapper {
    position: fixed;
    top: 0;
    bottom: 50*@fx;
    width: 100%;
  }

  .asset-info-form-wrapper {
    position: fixed;
    top: 45*@fx;
    bottom: 0;
    width: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .asset-info-tab {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 45*@fx;
    z-index: 99;
  }

  .asset-info-layout-form-wrapper {
    width: 100%;
    height: 100%;
    overflow: scroll;
    padding-bottom: 46*@fx;
    box-sizing: border-box;
  }

  .inventory-detail-box {
    padding-top: 30*@fx;
  }

  .inventory-detail-title-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: @font-size-caption;
    padding: 0 @h-spacing-lg;
    color: @color-text-base-inverse;
    border-radius: @radius-sm;
    height: 32*@fx;
    line-height: 32*@fx;
    z-index: 1;
    .background-linearTo(to right, #107acf, #5bc2da);
  }

  .inventory-form-box {
  }

  .inventory-form-title-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 @h-spacing-lg;
    color: @color-text-base-inverse;
    border-radius: @radius-sm;
    height: 30*@fx;
    line-height: 30*@fx;
    z-index: 1;
    .background-linearTo(to right, #107acf, #5bc2da);
  }

  .cpt-tool-box {
    .flex;
    .flex-space-between;
    .flex-align-center;
    padding: 8*@fx;
    border-bottom: 1*@fx solid #ccc;

  }

  .cpt-btn-check {
    width: 60*@fx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0*@fx 8*@fx;
    height: 22*@fx;
    line-height: 22*@fx;
    border-radius: 10*@fx;
    margin-right: @h-spacing-md;
    color: @cpt-paragraph-color;
    border: 1*@fx solid @cpt-placeholder-color;
    background: @cpt-placeholder-color;;
  }

  .cpt-btn-checked {
    width: 60*@fx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0*@fx 8*@fx;
    height: 22*@fx;
    line-height: 22*@fx;
    border-radius: 10*@fx;
    margin-right: @h-spacing-md;
    border: 1*@fx solid @brand-primary;
    color: @brand-primary;
    background: fade(@brand-primary, 10%);
  }

  .cpt-tool-scan {
    display: block;
    font-size: 40*@fx;
    margin-top: 2.5*@fx;
    margin-right: 2.5*@fx;
    color: @brand-primary;
  }

  .tab-tint-color {
    color: @brand-primary;
  }

  .am-grid .am-carousel .am-carousel-wrap-dot-active > span {
    background: @brand-primary;
  }
}
